<template>
  <el-dialog
    class="detail-thickness-card-dialog"
    title="细节厚度对照表"
    width="1200px"
    :visible.sync="dialogVisible"
    :close-on-click-modal="true"
    v-dialogDrag="true"
    append-to-body
    @open="handleDialogOpen"
    @closed="handleDialogClosed"
  >
    <div>
      <table border="1" cellspacing="0" cellpadding="0" align="center"
      style="width: 100%; margin-top: 10px; border-collapse: collapse;">
        <tbody>
          <tr>
            <td width="50px"></td>
            <td colspan="21">Disc Diameter(mm)</td>
          </tr>
          <tr v-for="(trItem, trIndex) in data" :key="trIndex">
            <td>
              {{ trIndex == 0 ? '' : data.length - trIndex }}
            </td>
            <td
              style="width: 60px; padding: 10px 0;"
              v-for="(tdItem, tdIndex) in trItem"
              :key="tdIndex"
            >{{ tdItem }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </el-dialog>
</template>

<script>
import { getDetailThicknessCard } from '@/api/testItem/item11'

export default {
  name: 'DetailThicknessCardDialog',
  components: {},
  dicts: [],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    type: {
      type: Number,
      default: 0,
    }
  },
  data() {
    return {
      data: [],
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('update:show', value)
      }
    }
  },
  created() {
  },
  methods: {
    // 弹框打开时
    handleDialogOpen() {
      if (this.data.length <= 0) {
        getDetailThicknessCard().then(res => {
          const data = res.data || {}
          for (let key in data) {
            const values = Object.values(data[key])
            data[key] = values.reverse()
          }
          const headRow = Object.keys(data).sort((a, b) => b - a)
          this.data.push(headRow)
          const rowNum = 16
          for (let i = 0; i < rowNum; i++) {
            const row = []
            headRow.forEach(key => {
              row.push(data[key][i])
            })
            this.data.push(row)
          }
          // console.log(this.data)
        }).catch(err => {})
      }
    },
    // 弹框关闭时
    handleDialogClosed() {
    },
  }
}
</script>

<style lang="scss" scoped>
.detail-thickness-card-dialog {

  ::v-deep .el-dialog__body {
    max-height: 90vh;
    overflow-y: auto;
  }

  table thead tr th {
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
  }

  table tbody tr td {
    padding: 3px 0;
    text-align: center;
  }
}
</style>